<template>
<div class="header">
    <swiper :options="swiperOption">
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img :src="item.imgUrl" >
   </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
       pagination: '.swiper-pagination',
       loop: true
      },
      swiperList:[{
        id: "001",
        imgUrl:"https://img1.qunarzz.com/qs/1808/c1/96aead8f8ed82902.jpg"
      },{
        id: "002",
        imgUrl:"https://img1.qunarzz.com/qs/1808/60/06b7248f0027c202.jpg"
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
.header >>> .swiper-pagination-bullet-active
    background: #fff!important
.header
     display:flex
     margin: 0 auto;
     line-height :5.86rem
     height: 5.86rem
     background :$bgColor
     color: #fff
     width :10rem
</style>
